<template>
<div>
        <van-nav-bar
  title="客户服务"
  left-text=""
  right-text="···"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<van-search v-model="value" placeholder="有问题？搜一下" background="rgb(242,242,242)" />
<div style="position:relative;height:32px;width:100%;margin:0 auto;background:rgb(242,242,242)"><span class="gong"></span><span style="color:#232326;font-size:13px;position:absolute;left:62px;top:0.18rem">关于参加“诚信经营、放心消费”的活动公告</span></div>
<div>
  <span style="display:block;font-size:12px;margin:10px">自助服务</span>
  <van-grid :column-num="4">
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/626d985bfc7c47b28f668a4d98407dfb.png" text="退换/售后" />
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/098fbecb58934e1487f1caa9860e73b6.png" text="价格保护" />
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/0c70227b115a4c30af5cba266da83277.png" text="交易纠纷" />
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/ca151a05fad74c0fb75fc98d6285498c.png" text="配送服务说明" />
    <van-grid-item icon="//storage.jd.com/karma/image/20200514/fd50b709dd7f4268a219de2e6e9ba029.png" text="自提点查询" />
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/9337af5f1d3e4408b47d4f77c1ad0238.png" text="安装维修服务" />
  <van-grid-item icon="//storage.jd.com/karma/image/20200514/80418c898016483990417ab4b99295e1.png" text="发票服务" />
</van-grid>
</div>
</div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
Vue.use(Search);
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem)
export default {
  data(){
    return {
      value:'',
      a:1
    }
  },
methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {
    },
  },  
}
</script>

<style scoped>
.gong {
  background: url('@/assets/公告.png') 0 0 no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 47px;
  height: 20px;
  margin-left: 15px;
  position: absolute;
  top: 0.18rem;
}
</style>